<template>
  <!-- 头部区域 -->
  <el-header>
    <div class="title">海崖书吧</div>
    <i class="el-icon-user-solid"></i>
    <span v-html="username"></span>
    <el-button type="primary" size="mini" @click="logout">退出</el-button>
  </el-header>
</template>
<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  created() {
    this.username = window.sessionStorage.getItem('username')
  },
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
      this.$message.success('退出成功！')
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  // background-color: #a6f0c6;
  display: flex;
  // 左右贴标对齐
  justify-content: space-between;
  // padding: 5px;
  align-items: center;
  color: rgb(24, 22, 22);
  font-size: 20px;
  .el-button {
    margin-left: 10px;
  }
  > div {
    display: flex;
    align-items: center;
    margin: auto;
  }

}
</style>
